<app-breadcrumb #breadcumbs [tenantId]="tenantId" [hotelBrandId]="hotelBrandId" [hotelBrandName]="hotelBrandName"
  [hotelId]="hotelId" [hotelIndex]="hotelIndex" [hotelName]="hotelName" [floorName]="floorName"></app-breadcrumb>

<div class="floorplan-root">
  <div class="legend-panel-container">
    <div class="legend-panel">
      <div class="legend-entry-container">
        <div class="legend-icon occupied"></div>
        occupied
      </div>
      <div class="legend-entry-container bottom">
        <div class="legend-icon vacant"></div>
        vacant
      </div>
    </div>
  </div>
  <div #floorplanContainer id="floorplanContainer"></div>
  <div *ngIf="selectedRoom" class="room-info-panel">
    <div *ngIf="selectedRoom" class="roomName">{{selectedRoom.friendlyName}}</div>
    <div class="motion-status-panel">
      <div *ngIf="selectedRoom && selectedRoom.motion; else noMotion">
        <div *ngIf="selectedRoom.motion.isMotion" class="occupied"> occupied </div>
        <div *ngIf="!selectedRoom.motion.isMotion" class="vacant">vacant </div>
      </div>
      <ng-template #noMotion>
        <div class="vacant">N/A</div>
      </ng-template>
    </div>
    <div class="room-type-grid light-label">
      <div class="room-type">{{getFriendlyRoomType(selectedRoom)}}</div>
    </div>
    <div class="grid-labels light-label grid">
      <div class="desired">desired</div>
      <div class="actual">actual</div>
    </div>
    <div class="room-temp-grid light-label grid">
      <div class="room-temp">Temp (F)</div>
      <div *ngIf="selectedRoom && selectedRoom.thermostat; else noDesiredTemp" class="desired">{{selectedRoom.thermostat.desired}}</div>
      <ng-template #noDesiredTemp>
        <div class="desired">N/A</div>
      </ng-template>
      <div *ngIf="selectedRoom && selectedRoom.thermostat && !useBasicAuth" class="slider custom-slider">
        <ng5-slider [(value)]="selectedRoom.thermostat.desired" [options]="thermostatSliderOptions" (userChangeStart)="sliderChangeBegin()"
          (userChangeEnd)="sliderChangeEnd()" (userChange)="thermostatSliderValueChange(selectedRoom, $event)"></ng5-slider>
      </div>
      <div *ngIf="selectedRoom && selectedRoom.thermostat; else noActualTemp" class="actual">{{selectedRoom.thermostat.actual}}</div>
      <ng-template #noActualTemp>
          <div class="actual">N/A</div>
        </ng-template>
    </div>
    <div class="room-lights-grid light-label grid">
      <div class="room-lights">Lights</div>
      <div *ngIf="selectedRoom && selectedRoom.light; else noDesiredLight" class="desired">{{selectedRoom.light.desired.toFixed(0)}}%</div>
      <ng-template #noDesiredLight>
          <div class="desired">N/A</div>
        </ng-template>
      <div *ngIf="selectedRoom && selectedRoom.light && !useBasicAuth" class="slider custom-slider">
        <ng5-slider [(value)]="selectedRoom.light.desired" [options]="lightSliderOptions" (userChangeStart)="sliderChangeBegin()"
          (userChangeEnd)="sliderChangeEnd()" (userChange)="lightSliderValueChange(selectedRoom, $event)"></ng5-slider>
      </div>
      <div *ngIf="selectedRoom && selectedRoom.light; else noActualLight" class="actual">{{selectedRoom.light.actual.toFixed(0)}}%</div>
      <ng-template #noActualLight>
          <div class="actual">N/A</div>
        </ng-template>
    </div>
    <div *ngIf="selectedRoom" class="alert-message">{{selectedRoom.alertMessage}}</div>
  </div>
</div>
